<script>
import MyButton from './components/MyButton.vue';
import { shallowReactive } from 'vue';

    export default{
        data(){
            // data返回对象会被vue所代理
            // this.$data.xxx = "xxx" 动态添加相应数据（不建议）
            // 建议将暂时没有使用到的属性，也添加到data返回的对象中，值可以设置为null
            return{
                msg:"今天天气真好",
                // vue在构建响应式对象，会同时将对象中的属性也做成响应式属性
                // 深层响应式对象
                stu:{
                    name:"孙悟空",
                    age:18,
                    gender:"男",
                    friend:{
                        name:"唐僧",
                        age:16,
                        gender:"男"
                    }
                },
                hello: null
            }

            // 有些场景下，可以通过shallowRecative()来创建一个浅层的响应式对象
            // return shallowReactive({
            //     msg:"今天我在学习",
            //     stu:{
            //         name:"孙悟空",
            //         age:18,
            //         gender:"男",
            //         friend:{
            //             name:"唐僧",
            //             age:16,
            //             gender:"男"
            //         }
            //     }
            // })
        },
        components:{
            MyButton
        }
    }
</script>

<template>
    <h1>{{ msg }}</h1>
    <h2>{{ stu.name  }} --{{ stu.gender  }} --{{ stu.age  }}</h2>
    <h2>{{ stu.friend.name  }}</h2>

    <hr>
    <MyButton></MyButton>
    <MyButton></MyButton>
    <MyButton></MyButton>
    <MyButton></MyButton>
</template>